```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringBoot如何实现跨域 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .code-block {
            background-color: #282c34;
            border-radius: 8px;
            color: #abb2bf;
            font-family: 'Courier New', Courier, monospace;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .highlight {
            background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 88%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center fade-in">
            <h1 class="text-4xl md:text-6xl font-bold mb-4">SpringBoot跨域解决方案</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">解锁跨域资源共享(CORS)的多种实现方式，构建无缝的前后端交互体验</p>
            <div class="flex justify-center space-x-4">
                <a href="#global" class="px-6 py-3 bg-white text-purple-700 rounded-full font-semibold hover:bg-purple-100 transition duration-300">
                    <i class="fas fa-globe mr-2"></i>全局配置
                </a>
                <a href="#annotation" class="px-6 py-3 bg-purple-800 text-white rounded-full font-semibold hover:bg-purple-900 transition duration-300">
                    <i class="fas fa-tag mr-2"></i>注解配置
                </a>
                <a href="#frontend" class="px-6 py-3 bg-purple-800 text-white rounded-full font-semibold hover:bg-purple-900 transition duration-300">
                    <i class="fas fa-code mr-2"></i>前端方案
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Introduction -->
        <section class="mb-16 fade-in">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h2 class="text-2xl font-bold mb-4 text-purple-700">跨源资源共享(CORS)是什么？</h2>
                <p class="mb-6">跨源资源共享（CORS）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。</p>
                
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711688176598-c3ca9d10-f3fc-4801-adbd-1513c101ee74.png" alt="CORS机制图解" class="w-full h-auto">
                </div>
                
                <p>CORS还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。</p>
                <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS" class="inline-block mt-4 text-purple-600 hover:text-purple-800">
                    <i class="fas fa-external-link-alt mr-1"></i> 查看MDN官方文档
                </a>
            </div>
        </section>

        <!-- Visualization -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-2xl font-bold mb-4 text-purple-700">跨域解决方案概览</h2>
                <div class="mermaid">
                    graph TD
                        A[SpringBoot跨域解决方案] --> B[全局配置]
                        A --> C[注解配置]
                        A --> D[过滤器配置]
                        A --> E[Spring Security]
                        A --> F[前端解决方案]
                        B --> B1[WebMvcConfigurer]
                        C --> C1[@CrossOrigin]
                        D --> D1[自定义Filter]
                        E --> E1[Spring Security配置]
                        F --> F1[CORS头部]
                        F --> F2[JSONP]
                        F --> F3[代理服务器]
                </div>
            </div>
        </section>

        <!-- Global Configuration -->
        <section id="global" class="mb-16 fade-in">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover transition duration-300">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-globe text-purple-600 text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-purple-700">全局配置</h2>
                </div>
                <p class="mb-4">在Spring Boot中实现跨域请求的全局配置通常通过创建一个配置类并实现<code class="bg-gray-100 px-2 py-1 rounded">WebMvcConfigurer</code>接口来完成。通过这种方式，可以统一管理应用程序中所有Controller的跨域规则，确保一致性和可维护性。</p>
                
                <div class="code-block p-4 mb-4 overflow-x-auto">
                    <pre class="text-sm"><code>@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 匹配所有请求路径
                .allowedOrigins("http://example.com") // 允许的来源
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的HTTP方法
                .allowedHeaders("*") // 允许的头部信息
                .allowCredentials(true) // 是否允许携带凭证（cookies）
                .maxAge(3600); // 预检请求的缓存时间
    }
}</code></pre>
                </div>
                
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-800">配置说明</h3>
                            <div class="mt-2 text-sm text-blue-700">
                                <ul class="list-disc pl-5 space-y-1">
                                    <li><code>addMapping("/**")</code> - 匹配所有请求路径</li>
                                    <li><code>allowedOrigins</code> - 允许的来源（可指定多个）</li>
                                    <li><code>allowedMethods</code> - 允许的HTTP方法</li>
                                    <li><code>allowedHeaders</code> - 允许的头部信息</li>
                                    <li><code>allowCredentials</code> - 是否允许携带凭证</li>
                                    <li><code>maxAge</code> - 预检请求的缓存时间</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Annotation Configuration -->
        <section id="annotation" class="mb-16 fade-in">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover transition duration-300">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-tag text-purple-600 text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-purple-700">注解配置</h2>
                </div>
                <p class="mb-4">在Spring Boot中实现跨域请求，可以通过在Controller的方法上使用<code class="bg-gray-100 px-2 py-1 rounded">@CrossOrigin</code>注解来配置跨域访问的规则。这种方式简单快捷，适用于特定的Controller或者特定的请求处理。</p>
                
                <div class="code-block p-4 mb-4 overflow-x-auto">
                    <pre class="text-sm"><code>@RestController
public class MyController {

    @GetMapping("/hello")
    @CrossOrigin(origins = "http://example.com", methods = {RequestMethod.GET})
    public String hello() {
        return "Hello, World!";
    }
}</code></pre>
                </div>
                
                <div class="grid md:grid-cols-2 gap-4 mb-4">
                    <div class="bg-purple-50 border-l-4 border-purple-400 p-4">
                        <h3 class="text-sm font-medium text-purple-800 mb-2">优点</h3>
                        <ul class="text-sm text-purple-700 space-y-1">
                            <li><i class="fas fa-check-circle mr-2"></i>简单易用，直接在方法上添加注解</li>
                            <li><i class="fas fa-check-circle mr-2"></i>灵活控制单个API的跨域规则</li>
                            <li><i class="fas fa-check-circle mr-2"></i>支持方法级别和类级别的配置</li>
                        </ul>
                    </div>
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                        <h3 class="text-sm font-medium text-yellow-800 mb-2">注意事项</h3>
                        <ul class="text-sm text-yellow-700 space-y-1">
                            <li><i class="fas fa-exclamation-triangle mr-2"></i>仅适用于特定Controller或方法</li>
                            <li><i class="fas fa-exclamation-triangle mr-2"></i>不适合复杂的跨域配置需求</li>
                            <li><i class="fas fa-exclamation-triangle mr-2"></i>可能需要多处重复配置</li>
                        </ul>
                    </div>
                </div>
                
                <p class="text-sm text-gray-600">除了<code class="bg-gray-100 px-1 py-0.5 rounded">origins</code>和<code class="bg-gray-100 px-1 py-0.5 rounded">methods</code>属性外，<code class="bg-gray-100 px-1 py-0.5 rounded">@CrossOrigin</code>注解还支持<code class="bg-gray-100 px-1 py-0.5 rounded">allowedHeaders</code>、<code class="bg-gray-100 px-1 py-0.5 rounded">exposedHeaders</code>、<code class="bg-gray-100 px-1 py-0.5 rounded">allowCredentials</code>和<code class="bg-gray-100 px-1 py-0.5 rounded">maxAge</code>等属性，可以进一步配置跨域请求的规则。</p>
            </div>
        </section>

        <!-- Filter Configuration -->
        <section class="mb-16 fade-in">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover transition duration-300">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-filter text-purple-600 text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-purple-700">过滤器配置</h2>
                </div>
                <p class="mb-4">通过自定义过滤器来处理跨域请求可以更加灵活地控制跨域请求的处理逻辑，并且可以针对特定的请求进行定制化处理。</p>
                
                <div class="code-block p-4 mb-4 overflow-x-auto">
                    <pre class="text-sm"><code>@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "http://example.com");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(request, response);
    }
}</code></pre>
                </div>
                
                <div class="bg-green-50 border-l-4 border-green-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-green-800">适用场景</h3>
                            <div class="mt-2 text-sm text-green-700">
                                <ul class="list-disc pl-5 space-y-1">
                                    <li>需要动态配置跨域规则的情况</li>
                                    <li>需要对跨域请求进行额外处理（如日志记录）</li>
                                    <li>无法修改Controller代码的情况</li>
                                    <li>需要与其他过滤逻辑结合的场景</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Spring Security -->
        <section class="mb-16 fade-in">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover transition duration-300">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-purple-700">使用Spring Security</h2>
                </div>
                <p class="mb-4">Spring Security是一个常用的第三方库，它提供了丰富的安全功能，包括跨域请求的处理。可以与已有的安全配置集成。</p>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">1. 添加依赖</h3>
                        <div class="code-block p-4 mb-4 overflow-x-auto">
                            <pre class="text-sm"><code>&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
    &lt;artifactId&gt;spring-boot-starter-security&lt;/artifactId&gt;
&lt;/dependency&gt;</code></pre>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">2. 配置Security</h3>
                        <div class="code-block p-4 overflow-x-auto">
                            <pre class="text-sm"><code>@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors(); // 启用跨域请求处理
    }
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4 bg-indigo-50 border-l-4 border-indigo-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-star text-indigo-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-indigo-800">优势</h3>
                            <div class="mt-2 text-sm text-indigo-700">
                                使用Spring Security实现跨域请求的优点是可以与其他安全功能集成，并且可以灵活地进行配置和管理，在保障应用安全的同时实现跨域请求的处理。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Frontend Solutions -->
        <section id="frontend" class="mb-16 fade-in">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover transition duration-300">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-laptop-code text-purple-600 text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-purple-700">前端解决方案</h2>
                </div>
                <p class="mb-6">从前端解决跨域问题主要涉及在前端代码中进行配置或处理，以确保浏览器允许跨域请求。以下是一些常见的前端解决跨域问题的方法：</p>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <!-- CORS -->
                    <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-purple-300 transition duration-300">
                        <div class="flex items-center mb-3">
                            <div class="bg-blue-100 p-2 rounded-full mr-3">
                                <i class="fas fa-exchange-alt text-blue-500"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800">CORS头部信息</h3>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">在请求头部信息中添加Access-Control-Allow-Origin等CORS相关的头部信息。</p>
                        <div class="code-block p-3 text-xs mb-3">
                            <pre><code>fetch('https://api.example.com', {
    mode: 'cors',
    credentials: 'include'
});</code></pre>
                        </div>
                        <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">推荐方式</span>
                    </div>
                    
                    <!-- JSONP -->
                    <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-purple-300 transition duration-300">
                        <div class="flex items-center mb-3">
                            <div class="bg-green-100 p-2 rounded-full mr-3">
                                <i class="fab fa-js text-green-500"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800">JSONP</h3>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">利用&lt;script&gt;标签不受同源策略限制的特性实现跨域请求。</p>
                        <div class="code-block p-3 text-xs">
                            <pre><code>function handleResponse(data) {
    console.log(data);
}
&lt;script src="https://api.example.com?callback=handleResponse"&gt;&lt;/script&gt;</code></pre>
                        </div>
                        <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">传统方案</span>
                    </div>
                    
                    <!-- Proxy -->
                    <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-purple-300 transition duration-300">
                        <div class="flex items-center mb-3">
                            <div class="bg-purple-100 p-2 rounded-full mr-3">
                                <i class="fas fa-server text-purple-500"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800">代理服务器</h3>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">通过自己的服务器转发请求，绕过浏览器的同源策略限制。</p>
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-arrow-right mr-2"></i>
                            <span>前端 → 代理服务器 → 目标API</span>
                        </div>
                        <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mt-3">开发常用</span>
                    </div>
                    
                    <!-- WebSocket -->
                    <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-purple-300 transition duration-300">
                        <div class="flex items-center mb-3">
                            <div class="bg-indigo-100 p-2 rounded-full mr-3">
                                <i class="fas fa-plug text-indigo-500"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800">WebSocket</h3>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">基于TCP协议，不受同源策略限制，可直接建立跨域连接。</p>
                        <div class="code-block p-3 text-xs">
                            <pre><code>const socket = new WebSocket('ws://example.com/socket');</code></pre>
                        </div>
                        <span class="inline-block bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">实时通信</span>
                    </div>
                </div>
                
                <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-yellow-800">安全考虑</h3>
                            <div class="mt-2 text-sm text-yellow-700">
                                尽管有多种前端解决方案，但出于安全考虑，建议优先使用标准的CORS机制。JSONP、代理服务器等方式可能存在安全风险，仅应在必要时使用。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Summary -->
        <section class="mb-16 fade-in">
            <div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-xl shadow-md p-8">
                <h2 class="text-2xl font-bold mb-6 text-center text-purple-700">方案选择指南</h2>
                
                <div class="mermaid mb-8">
                    graph LR
                        A[选择跨域方案] -->|简单应用| B[注解配置]
                        A -->|统一规则| C[全局配置]
                        A -->|复杂需求| D[过滤器]
                        A -->|安全集成| E[Spring Security]
                        A -->|前端控制| F[前端方案]
                        B --> G[少量API]
                        C --> H[整个应用]
                        D --> I[动态配置]
                        E --> J[已有安全需求]
                        F --> K[后端不可控]
                </div>
                
                <div class="bg-white rounded-lg p-6 shadow-sm">
                    <h3 class="text-lg font-semibold mb-4 text-gray-800">最佳实践建议</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-purple-500 mr-3">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="text-gray-700">对于大多数Spring Boot应用，推荐使用<strong class="text-purple-600">全局配置</strong>方式，统一管理跨域规则</span>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-purple-500 mr-3">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="text-gray-700">如果应用已使用Spring Security，优先通过<strong class="text-purple-600">Security配置</strong>启用CORS支持</span>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-purple-500 mr-3">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="text-gray-700">特殊API需要不同规则时，可结合使用<strong class="text-purple-600">注解配置</strong></span>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-purple-500 mr-3">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="text-gray-700">前端开发时，可使用<strong class="text-purple-600">代理服务器</strong>解决跨域问题，但生产环境应配置正确的CORS</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto max-w-5xl px-4 text-center">
            <div class="mb-4">
                <a href="http://www.yuque.com/jtostring" class="text-white hover:text-purple-300 transition duration-300 font-medium">
                    <i class="fas fa-book-open mr-2"></i>技术小馆
                </a>
            </div>
            <p class="text-sm">
                地址: <a href="http://www.yuque.com/jtostring" class="hover:text-purple-300 transition duration-300">http://www.yuque.com/jtostring</a>
            </p>
            <div class="mt-6 flex justify-center space-x-4">
                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                    <i class="fab fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                    <i class="fab fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                    <i class="fab fa-weixin text-xl"></i>
                </a>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple animation on scroll
        document.addEventListener('DOMContentLoaded', function() {
            const fadeIns = document.querySelectorAll('.fade-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });
            
            fadeIns.forEach(element => {
                observer.observe(element);
            });
        });
    </script>
</body>
</html>
```